<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">分发链接</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true" size='small'>
                    <el-form-item label="渠道名称:">
                        <el-select v-model="searchObj.channelName" @change="selectChange" size='small' clearable placeholder="" style="width: 150px">
                            <el-option label="全部" value=""/>
                            <el-option v-for="item in channelData" :key="item.autoId" :label="item.channelName" :value="item.channelName"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="渠道编号:">
                        <el-input v-model.trim="searchObj.channelNo" clearable placeholder="" size='small' style="width:150px;"/>
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select v-model="searchObj.status" @change="selectChange" size='small' placeholder="" style="width: 130px">
                            <el-option label="全部" value="-1" />
                            <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                        </el-select>                
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addeditDailog('add')" size='small'>新增</el-button>
                    </el-form-item>
                </el-form>
                <!--表格数据-->
                <el-table :data="tableData" v-loading="listLoading" element-loading-text="拼命加载中" border>
                    <el-table-column type='index' width='70' label="编号"/>
                    <el-table-column prop="channelName" label="渠道名称"/>
                    <el-table-column prop="channelNo" label="渠道编号"/>
                    <el-table-column prop="template" label="链接"/>
                    <el-table-column label="单价" width="90">
                        <template slot-scope="scope">
                            <span v-if="scope.row.settleValueForCpa || scope.row.settleValueForUv">
                                {{scope.row.settleValueForCpa ? scope.row.settleValueForCpa : scope.row.settleValueForUv}}
                            </span>
                            <span v-else>
                                0
                            </span>
                            <!-- {{scope.row.settleValueForCpa ? scope.row.settleValueForCpa : scope.row.settleValueForUv}} -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="deductionValue" label="展示系数" width="90"/>
                    <el-table-column label="结算方式" width="90">
                        <template slot-scope="scope">
                            <span v-if="scope.row.settleValueForCpa || scope.row.settleValueForUv">
                                {{scope.row.settleValueForCpa ? "cpa" : "uv"}}
                            </span>
                            <span v-else>
                                无
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <span :class="statusMap[scope.row.status]== '下线'?'color-red':''">
                                {{statusMap[scope.row.status]}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" class-name="second-btn">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" @click="upDownline(scope.row)">{{scope.row.status == 1 ? '下线': '上线'}}</el-button>
                            <!-- <el-button type="primary" size="mini" @click="addeditDailog('edit',scope.row)">编辑</el-button> -->
                            <!-- <el-button type="danger" size="mini" @click="deleteData(scope.$index,scope.row.autoId)">删除</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :close-on-click-modal='false' :visible.sync="dialogFormVisible" width="50%" @close="closeDailog">
                    <el-form label-width="130px">
                        <el-form-item label="机构名称:">
                            <el-select v-model="dailogFrom.channelId" size='small' placeholder="请选择结构" style="width: 200px">
                                <el-option v-for="item in channelData" :key="item.autoId" :label="item.channelName" :value="item.autoId"/>
                            </el-select>                        
                        </el-form-item>
                        <el-form-item label="渠道名称:">
                            <el-input v-model.trim="dailogFrom.channelNo" placeholder="例如: niwodai" size='small' style="width:200px;"/>
                        </el-form-item>
                        <el-form-item label="原始链接:">
                            <el-select v-model="dailogFrom.linkUrl" style="width:400px;" placeholder="请选择原始链接" size='small'>
                                <el-option label="http://h5.ronge.likedu.top/html/etime/index.html" value='http://h5.ronge.likedu.top/html/etime/index.html'/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="结算方式:">
                            <el-select v-model="settleType" style="width:200px;" placeholder="请选择结算方式" size="small">
                                <el-option label="uv" value="uv" />
                                <el-option label="cpa" value="cpa" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="单价:">
                            <el-input v-model.number="settleValue" placeholder="请输入单价" size="small" style="width:200px;"/>
                        </el-form-item>
                        <el-form-item label="展示系数:">
                            <el-input v-model.number="dailogFrom.deductionValue" placeholder="请输入系数(0-1)" size="small" style="width:200px;"/>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>
<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            listLoading: false, //加载中
            searchObj: {
                channelName:'',
                status:"-1"
            }, //查询参数
            tableData: [], //查询列表
            currentPage: 1, // 当前页数
            pageCount: 1, // 总页数

            statusMap: {
                "1": "上线",
                "0": "下线"
            },

            settleType:"",
            settleValue:"",

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "120px",
            dailogFrom: {},

            channelData: [], //渠道列表
            selectDisabled: false
        };
    },
    watch: {
        dialogType() {
            if (this.dialogType === "add") {
                this.dialogTitle = "新增";
            } else {
                this.dialogTitle = "编辑";
                this.selectDisabled = true;
            }
        }
    },
    methods: {
        init(){
            this.dailogFrom = {
                channelId:'',
                channelNo:'',
                template:'',
                linkUrl:'',
                deductionValue:''
                
                // status:1,
            }
            this.settleType = "";
            this.settleValue = "";
        },
        // 点击查询
        onSubmit() {
            // 查询数据列表
            this.getDataList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询数据列表
            this.getDataList();
        },
        selectChange() {
            this.getDataList();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.findFlowInfo({
                ...this.searchObj,
                pageNum: this.currentPage
            })
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data.flowList;
                    this.pageCount = res.data.page;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },

        // 查询产品列表
        getAppList() {
            api.getFlowChannelList({
                status:-1,
                pageSize: 1000
            }).then(res => {
                this.channelData = res.data.list;
            });
        },

        // 新增/编辑 弹窗
        addeditDailog(type, rowData) {
            if (type == "add") {
                this.dialogType = "add";
                this.init();
            } else {
                this.dialogType = "edit";
                this.dailogFrom = Object.assign({}, rowData);
                // for (const key in rowData) {
                //     if (rowData[key] !== null) {
                //         this.dailogFrom[key] = rowData[key].toString();
                //     }
                // }
            }
            this.dialogFormVisible = true;
        },
        // 上下线操作
        upDownline(row) {
            const statusStr = row.status === 1 ? "下线" : "上线";
            this.$confirm(`确定${statusStr}该链接吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    const postObj = {
                        autoId:row.autoId,
                        status: row.status === 1 ? 0 : 1
                    };
                    console.log(postObj);
                    api.updateFlowInfo(postObj).then(res => {
                        this.$message.success("操作成功!");
                        // 获取数据列表
                        this.getDataList();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
        },

        //删除产品
        deleteData(index, autoId) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    console.log("delete");
                    api.deleteOperationResources({
                        autoId: autoId
                    }).then(res => {
                        // 改变页面显示
                        this.tableData.splice(index, 1);
                        // 重新请求列表
                        // this.getDataList();
                        // 提示成功
                        this.$message.success("删除成功!");
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },

        // 关闭弹窗 输入框数据清空
        closeDailog() {
            this.init();
        },

        // 新增/编辑 确定
        confirm() {     
            if (!this.dailogFrom.channelId) {
                this.$message.error("请选择机构!");
                return false;                
            }
            if (!this.dailogFrom.channelNo) {
                this.$message.error("请输入渠道名称!");
                return false;                
            }
            if (!this.dailogFrom.linkUrl) {
                this.$message.error("请选择链接!");
                return false;                
            }
            if (!this.settleType) {
                this.$message.error("请选择结算方式!");
                return false;                
            }
            if (!this.settleValue) {
                this.$message.error("请输入单价!");
                return false;                
            }
            if (isNaN(this.settleValue)) {
                this.$message.error("请输入正确单价!");
                return false;                
            }
            if (!this.dailogFrom.deductionValue) {
                this.$message.error("请输入系数!");
                return false;                
            }
            if (isNaN(this.dailogFrom.deductionValue)) {
                this.$message.error("请输入正确系数!");
                return false;                
            }
            if (Number(this.dailogFrom.deductionValue) > 1 || Number(this.dailogFrom.deductionValue) < 0) {
                this.$message.error("系数为0至1之间!");
                return false;  
            }
            if (this.dialogType === "add") {
                // 添加数据
                this.addData();
            } else if (this.dialogType === "edit") {
                // 更新数据
                this.updateData();
            }
        },

        // 添加数据
        addData() {
            this.dailogFrom.template = `${this.dailogFrom.linkUrl}?efrom=${this.dailogFrom.channelNo}`; 
            if (this.settleType == "uv") {
                this.dailogFrom.settleValueForUv = this.settleValue;
                this.dailogFrom.settleValueForCpa = 0;
            }else{
                this.dailogFrom.settleValueForUv = 0;
                this.dailogFrom.settleValueForCpa = this.settleValue;
            }                        
            api.addFlowInfo(this.dailogFrom).then(() => {
                this.$message.success("新增成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        },
        // 更新数据
        updateData() {
            console.log(this.dailogFrom);
            api.updateFlowInfo(this.dailogFrom).then(() => {
                this.$message.success("更新成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 查询产品列表
        this.getAppList();
        // 查询数据列表
        this.getDataList();
    }
};
</script>

<style>
</style>
